import React from 'react'
import { Form, Input, Select, Button } from 'antd'

const { Option } = Select

export default class PriceInput extends React.Component {
  //todo kim-stamp 高端用法 从props获取派生状态 应该是受控组件,getDerivedStateFromProps的存在只有一个目的。它使组件能够根据changes in props的结果更新其内部状态
  //相当于从this.props获取值，再把值设置到到子组件的state中去，重新渲染，如果不这样操作，父组件虽然可以接受到子组件的值，但不会显示出输入的值
  static getDerivedStateFromProps(nextProps,prevState) {
    console.log(nextProps,prevState, "static getDerivedStateFromProps(nextProps,prevState)")
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {})
      }
    }
    return null
  }

  // componentWillReceiveProps(nextProps) {
  //   console.log(nextProps, "componentWillReceiveProps(nextProps)")
  //   if ('value' in nextProps) {
  //     this.setState({ ...(nextProps.value || {}) })
  //     return true
  //   }
  //   return false
  // }


  constructor(props) {
    super(props)
    const value = props.value || {}
    this.state = {
      number: value.number || this.props.number,
      currency: value.currency || 'rmb'
    }
  }

  handleNumberChange = e => {
    const number = parseInt(e.target.value || 0, 10)
    if (isNaN(number)) return;

    if (!('value' in this.props)) {
      this.setState({ number })
    }
    this.triggerChange({ number })
  }

  handleCurrencyChange = currency => {
    if (!('value' in this.props)) {
      this.setState({ currency })
    }
    this.triggerChange({ currency })
  }

  triggerChange = changedValue => {
    // 触发父组件得一个事件,把将值传递给父组件
    const { onChange } = this.props
    if (onChange) {
      onChange({
        ...this.state,
        ...changedValue
      })
    }
  }

  render() {
    const { size } = this.props
    const { currency, number } = this.state
    return (
      <span>
        <Input
          type='text'
          size={size}
          value={number}
          onChange={this.handleNumberChange}
          style={{ width: '65%', marginRight: '3%' }}
        />
        <Select
          value={currency}
          size={size}
          style={{ width: '32%' }}
          onChange={this.handleCurrencyChange}
        >
          {this.props.list.map(item => <Option value={item.value}>{item.name}</Option>)}
        </Select>
      </span>
    )
  }
}

// 自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

// 提供受控属性 value 或其它与 valuePropName 的值同名的属性。
// 提供 onChange 事件或 trigger 的值同名的事件。

// 支持 ref：
// React@16.3.0 之前只有 Class 组件支持。
// React@16.3.0 及之后可以通过 forwardRef 添加 ref 支持。（示例）
